<template>
    <div class="sktabs">
        <Tabs type="card" closable @on-tab-remove="handleTabRemove" @on-click="handleTabClick" :animated="false">
            <TabPane label="标签一" v-if="tab0" icon="social-windows" name="name1">{{content1}}</TabPane>
            <TabPane label="标签二" v-if="tab1" icon="social-apple" name="name2">{{content2}}</TabPane>
            <TabPane label="标签三" v-if="tab2" icon="social-tux" name="name3">{{content3}}</TabPane>
        </Tabs>
        <div>
            姓名: <input type="text" v-model="username" @click="userClick"/> 
        </div>
        <div>
            姓名: <input type="text" v-model="username2" @click="userClick"/> 
        </div>
        <div>
            您的姓名是: {{username}}
        </div>
         <div>
            您的姓名是: {{username}}
        </div> <div>
            您的姓名是: {{username}}
        </div> <div>
            您的姓名是: {{username}}
        </div> <div>
            您的姓名是: {{username}}
        </div> <div>
            您的姓名是: {{username}}
        </div> <div>
            您的姓名是: {{username}}
        </div>
        
    </div>
</template>

<script>
	export default {
        name: 'sktabs',
        data() {
            return {
                username: "1230130",
                content1: '内容1',
                content2: '内容2',
                content3: '内容3',
                tab0: true,
                tab1: true,
                tab2: true
            }
        },
        methods:{
            // 关闭标签页的处理函数
            handleTabRemove (name) {
                this['tab' + name] = false;
            },
            // 点击时触发的事件的处理函数
            handleTabClick(name) {
                //alert("Click " + name);
            },
            handleTabsAdd() {

            },
            userClick() {
                alert(this.username)
            }
        }
		
	}
</script>

<style scoped>
	
</style>